<template>
	<div>

		<!-- <div class="new-btn" @click="toPage">
			<u-icon name="plus-circle" color="#3b79fe" size="33"></u-icon>
			<span class="new-btn-text">新建标签</span>
		</div> -->
		<view class="cu-bar bg-white search fixed">
			  <view class="search-form round">
					<text class="icon-search"></text>
					<input type="text" placeholder="请选择" input-align="center" :disabled="true" v-model="LabelNamesShow"></input>
			  </view>
			  <view class="action u-pr-5">
					<u-button type="primary" size="mini" shape="square" @click="ConfirmSelect">确定</u-button>
			  </view>
		</view>

		<div style="padding-top: 110rpx;">
			<checkbox-group @change="checkboxChange" max="1">
				<div class="content-line" v-for="item in labels">
					<checkbox :value="item.WF_OrUnid" :checked="item.checked">
						<div class="label-name">{{item.LabelName}}（{{item.memberNum}}）</div>
						<div class="members">{{item.userList}}</div>
					</checkbox>
				</div>
			</checkbox-group>
		</div>

	</div>
</template>

<script>
	export default {
	  data() {
	    return {
				labels: [],
				owner: '',
				SceneAssetsId: '',
				selectedTeams: [],
				LabelNamesShow: ''
	    };
	  },
	  
	  onLoad(options) {
		  if(this.isNotNull(options.TeamNo) && this.isNotNull(options.TeamName)){
			  let team = {WF_OrUnid:options.TeamNo,LabelName:options.TeamName}
			  this.selectedTeams.push(team)
		  }
		  this.owner = uni.getStorageSync('userInfo').userId
		  if(this.isNotNull(options.owner)){
		  	  this.owner = options.owner
		  }
		  this.SceneAssetsId = options.SceneAssetsId
		  this.initLabelListData()
	  },
	  
	  methods:{
		  
		  /**
		  * 初始化标签列表数据
		  */
		  async initLabelListData(){
		    let result = await this.$u.api.unifyRequest({
				userId: this.owner,
				appid: 'CustomMade',
				wf_num: 'R_CustomMade_BL003',
				SceneAssetsId: this.SceneAssetsId,
				loading: false // 默认发起请求会有一个全局的Loading，设置false可去掉
		    });
			if(result.code == 200){
				this.labels = result.data
				if(this.selectedTeams.length > 0){
					for(let i in this.labels){
						if(this.labels[i].WF_OrUnid.indexOf(this.selectedTeams[0].WF_OrUnid)>-1){
							this.labels[i].checked = true
						}
					}
				}
			}
		  },
		  
		  /**
		   * 选中复选框
		   */
		  checkboxChange(e) {
				this.selectedTeams = []
				let TeamNoArr = e.detail.value
				if(TeamNoArr.length > 0){
					for(let index in TeamNoArr){
						let TeamNo = TeamNoArr[index]
						for(let i in this.labels){
							if(TeamNo.indexOf(this.labels[i].WF_OrUnid)>-1){
								this.selectedTeams.push(this.labels[i])
							}
						}
					}
				}else{
					this.selectedTeams = []
				}
				
				//给顶部输入框赋值
				this.LabelNamesShow = ''
				for(let i in this.selectedTeams){
					if(this.isNotNull(this.LabelNamesShow)){
						this.LabelNamesShow += "," + this.selectedTeams[i].LabelName
					}else{
						this.LabelNamesShow = this.selectedTeams[i].LabelName
					}
				}
		  },
		  
		  /**
		   * 选中团队确定返回
		   */
		  async ConfirmSelect(){
			  let teamList = []
			  for(let index in this.selectedTeams){
				  let team = {TeamNo:this.selectedTeams[index].WF_OrUnid,TeamName:this.selectedTeams[index].LabelName}
				  teamList.push(team)
			  }
			  if(this.selectedTeams.length > 1){
				  this.showMSG("none","只能选择1个团队哦！")
			  }else{
				  uni.$emit("saveTeamList", teamList)
				  this.goBack()
			  }
		  },
		  
		  /**
		   * 跳转到新建标签页面
		   */
		  toPage(){
				this.$u.route('/pages_tabbar_contact/CustomMade/labelAdd?SceneAssetsId='+this.SceneAssetsId)  
		  },
		  
		  /**
		   * 跳转到编辑标签页面
		   */
		  toLabelDetails(item) {
			  this.$u.route('/pages_tabbar_contact/CustomMade/label?SceneAssetsId=' + this.SceneAssetsId + '&owner=' + this.owner + '&LabelNumber=' + item.LabelNumber + '&LabelName=' + item.LabelName) 
		  },
		  
		}
		  
	}
</script>

<style scoped>
	
	.content-line{
		height: 110rpx;
		padding-left: 20rpx;
		border-bottom: 1rpx #e5e5e5 solid;
	}
	
	.label-name{
		font-weight: bold;
		padding-top: 10rpx;
	}
	
	.members{
		width: 700rpx;
		padding-top: 5rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	
	.new-btn {
		height: 110rpx;
		line-height: 110rpx;
		color: #79d47f;
		font-size: 32rpx;
		padding-left: 20rpx;
		border-bottom: 1rpx #e5e5e5 solid;
	}
	
	.new-btn-text{
		padding-left: 15rpx;
		color: #3b79fe;
	}
	
	.cu-bar {
		display: flex;
		position: relative;
		align-items: center;
		min-height: 100rpx;
		justify-content: space-between;
	}
	.cu-bar.fixed, .nav.fixed {
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 1024;
		box-shadow: 0 1rpx 6rpx rgba(0, 0, 0, 0.1);
	}
	.bg-white {
		background-color: #fff;
		color: #666;
	}
	.round {
		border-radius: 5000rpx;
	}
	.cu-bar .search-form {
		background-color: #f5f5f5;
		line-height: 64rpx;
		height: 64rpx;
		font-size: 24rpx;
		color: #666;
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 20rpx;
	}
</style>
